<script setup lang="ts">
import { useUserStore } from '@/store/user'
import { computed, ref } from 'vue'

const userStore = useUserStore()
const phone = computed(() => userStore.userInfo?.phone || '未绑定')
const email = computed(() => userStore.userInfo?.email || '未绑定')

// 设置状态
const settings = ref({
  systemNotification: true,
  messageNotification: true,
  soundNotification: true,
  locationPermission: true,
  cameraPermission: true,
  albumPermission: true,
})

// 切换系统通知
function toggleSystemNotification(e: any) {
  settings.value.systemNotification = e.detail.value
}

// 切换消息通知
function toggleMessageNotification(e: any) {
  settings.value.messageNotification = e.detail.value
}

// 切换声音提醒
function toggleSoundNotification(e: any) {
  settings.value.soundNotification = e.detail.value
}

// 切换位置权限
function toggleLocationPermission(e: any) {
  settings.value.locationPermission = e.detail.value
}

// 切换相机权限
function toggleCameraPermission(e: any) {
  settings.value.cameraPermission = e.detail.value
}

// 切换相册权限
function toggleAlbumPermission(e: any) {
  settings.value.albumPermission = e.detail.value
}

// 跳转到修改密码页面
function goToChangePassword() {
  uni.navigateTo({
    url: '/pages/user/change-password/index',
  })
}

// 跳转到账号注销页面
function goToDeleteAccount() {
  uni.navigateTo({
    url: '/pages/user/delete-account/index',
  })
}

// 跳转到绑定手机页面
function goToBindPhone() {
  // uni.navigateTo({
  //   url: '/pages/settings/bind-phone/index',
  // })
}

// 跳转到绑定邮箱页面
function goToBindEmail() {
  // uni.navigateTo({
  //   url: '/pages/settings/bind-email/index',
  // })
}

// 清除缓存
function clearCache() {
  uni.showModal({
    title: '提示',
    content: '确定要清除缓存吗？',
    success: (res) => {
      if (res.confirm) {
        uni.showLoading({
          title: '清除中',
        })

        // 模拟清除缓存
        setTimeout(() => {
          uni.hideLoading()
          uni.showToast({
            title: '清除成功',
            icon: 'success',
          })
        }, 1500)
      }
    },
  })
}

// 检查更新
function checkUpdate() {
  uni.showLoading({
    title: '检查中',
  })

  // 模拟检查更新
  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({
      title: '已是最新版本',
      icon: 'none',
    })
  }, 1500)
}

// 退出登录
function logout() {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        // 清除登录状态
        uni.clearStorageSync()

        // 跳转到登录页
        uni.reLaunch({
          url: '/pages/login/index',
        })
      }
    },
  })
}
</script>

<template>
  <view class="container">
    <!-- 账号安全 -->
    <view class="section">
      <view class="section-title">
        账号安全
      </view>
      <view class="setting-list">
        <view class="setting-item" @click="goToChangePassword">
          <view class="item-left">
            <text class="iconfont icon-password" />
            <text class="label">
              修改密码
            </text>
          </view>
          <text class="iconfont icon-arrow-right" />
        </view>

        <view class="setting-item" @click="goToBindPhone">
          <view class="item-left">
            <text class="iconfont icon-phone" />
            <text class="label">
              绑定手机
            </text>
          </view>
          <view class="item-right">
            <text class="value">
              {{ phone }}
            </text>
            <text class="iconfont icon-arrow-right" />
          </view>
        </view>

        <view class="setting-item" @click="goToBindEmail">
          <view class="item-left">
            <text class="iconfont icon-email" />
            <text class="label">
              绑定邮箱
            </text>
          </view>
          <view class="item-right">
            <text class="value">
              {{ email }}
            </text>
            <text class="iconfont icon-arrow-right" />
          </view>
        </view>

        <!-- 新增注销账号选项 -->
        <view class="setting-item" @click="goToDeleteAccount">
          <view class="item-left">
            <text class="iconfont icon-delete" />
            <text class="label">
              账号注销
            </text>
          </view>
          <text class="iconfont icon-arrow-right" />
        </view>
      </view>
    </view>

    <!-- 通知设置 -->
    <view class="section">
      <view class="section-title">
        通知设置
      </view>
      <view class="setting-list">
        <view class="setting-item">
          <view class="item-left">
            <text class="iconfont icon-notification" />
            <text class="label">
              系统通知
            </text>
          </view>
          <switch :checked="settings.systemNotification" color="#4caf50" @change="toggleSystemNotification" />
        </view>

        <view class="setting-item">
          <view class="item-left">
            <text class="iconfont icon-message" />
            <text class="label">
              消息通知
            </text>
          </view>
          <switch :checked="settings.messageNotification" color="#4caf50" @change="toggleMessageNotification" />
        </view>

        <view class="setting-item">
          <view class="item-left">
            <text class="iconfont icon-sound" />
            <text class="label">
              声音提醒
            </text>
          </view>
          <switch :checked="settings.soundNotification" color="#4caf50" @change="toggleSoundNotification" />
        </view>
      </view>
    </view>

    <!-- 隐私设置 -->
    <view class="section">
      <view class="section-title">
        隐私设置
      </view>
      <view class="setting-list">
        <view class="setting-item">
          <view class="item-left">
            <text class="iconfont icon-location" />
            <text class="label">
              位置信息
            </text>
          </view>
          <switch :checked="settings.locationPermission" color="#4caf50" @change="toggleLocationPermission" />
        </view>

        <view class="setting-item">
          <view class="item-left">
            <text class="iconfont icon-camera" />
            <text class="label">
              相机权限
            </text>
          </view>
          <switch :checked="settings.cameraPermission" color="#4caf50" @change="toggleCameraPermission" />
        </view>

        <view class="setting-item">
          <view class="item-left">
            <text class="iconfont icon-album" />
            <text class="label">
              相册权限
            </text>
          </view>
          <switch :checked="settings.albumPermission" color="#4caf50" @change="toggleAlbumPermission" />
        </view>
      </view>
    </view>

    <!-- 其他设置 -->
    <view class="section">
      <view class="section-title">
        其他设置
      </view>
      <view class="setting-list">
        <view class="setting-item" @click="clearCache">
          <view class="item-left">
            <text class="iconfont icon-clear" />
            <text class="label">
              清除缓存
            </text>
          </view>
          <view class="item-right">
            <text class="value">
              23.5MB
            </text>
            <text class="iconfont icon-arrow-right" />
          </view>
        </view>

        <view class="setting-item" @click="checkUpdate">
          <view class="item-left">
            <text class="iconfont icon-update" />
            <text class="label">
              检查更新
            </text>
          </view>
          <view class="item-right">
            <text class="value">
              当前版本 1.0.0
            </text>
            <text class="iconfont icon-arrow-right" />
          </view>
        </view>
      </view>
    </view>

    <!-- 退出登录 -->
    <view class="logout-btn" @click="logout">
      退出登录
    </view>
  </view>
</template>

<style lang="scss">
.container {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 30rpx;
}

.section {
  margin-bottom: 30rpx;

  .section-title {
    font-size: 28rpx;
    color: #999;
    margin-bottom: 20rpx;
    padding-left: 20rpx;
  }
}

.setting-list {
  background: #fff;
  border-radius: 12rpx;

  .setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx;
    border-bottom: 1rpx solid #f5f5f5;

    &:last-child {
      border-bottom: none;
    }

    .item-left {
      display: flex;
      align-items: center;

      .iconfont {
        font-size: 40rpx;
        color: #4caf50;
        margin-right: 20rpx;
      }

      .label {
        font-size: 28rpx;
        color: #333;
      }
    }

    .item-right {
      display: flex;
      align-items: center;

      .value {
        font-size: 28rpx;
        color: #999;
        margin-right: 10rpx;
      }

      .iconfont {
        font-size: 32rpx;
        color: #999;
      }
    }

    .icon-arrow-right {
      font-size: 32rpx;
      color: #999;
    }
  }
}

.logout-btn {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  background: #fff;
  border-radius: 12rpx;
  font-size: 32rpx;
  color: #ff4d4f;
  margin-top: 60rpx;
}
</style>
